<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片列表</title>
	<!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/headandfter.css" />
    
    <link rel="stylesheet" type="text/css" href="../css/imglist.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/SlideImg.js"></script>
    <script src="../js/header.js"></script>
    <script src="../js/ImgRatio.js"></script>
</head>

<body>
<header>
  <div class="header header-banner-bg">
    <div class="top">
      <div class="top-info fixed">
      	<div class="right fixed" style="*max-width:420px; position:relative;">
          <div class="message-content right"  style="position:relative; display:inline-block; height:40px;">
            <a href="#" class="message-info">
              <span class="message-nums">6</span>
            </a>
            <div class="h-MessageInfo">
              <p class="icon-tringle2"></p>
              <div class="h-M-Content">
                <p class="h-M-Title"><a href="javascript:void(0);" class="NowMeg" style="border-right:solid 1px #e6e6e6;">消息</a><a href="javascript:void(0);" style="width:189px;">动态</a></p>
                <ul class="h-Tab">
                  <li class="MsgContent">
                    <div class="Msg-txt">暂无新消息</div>
                    <p class="Msg-more"><a href="#">查看更多消息>></a></p>
                  </li>
                  <li class="cdtContent" style="display:none;">
                    <div class="Msg-txt">暂无新动态</div>
                    <p class="Msg-more"><a href="#">查看更多动态>></a></p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!--End 消息内容-->
          <div class="user-info right fixed">
            <div class="user-img left"><img src="../images/headandfter/user-img.png" /></div>
            <div class="user-name left">
              <a href="#">小豆女王</a>
              <span class="icon-tringle1"></span>
            </div>
            <div class="user-set">
              <p></p>
              <div class="us-Content"></div>
            </div><!--用户操作 未果-->
          </div>
        </div>
        <!--End 用户-->
        <div class="top-nav left">
          <a href="#" class="f-home">番石榴首页</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-news">新闻站</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-active">亲子活动站</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-shop">辣妈购物站</a>
          <span class="vertical-gray1"></span>
          <a href="#" class="f-lt">论坛</a>
        </div>
      </div>
    </div>
     <!--End top-->
    <div class="header-banner fixed">
      <div class="search-info right">
        <div class="search-content">
          <input type="text" name="search" value="" />
          <a href="javascript:void(0);" class="icon-search"></a>
        </div>
        <p class="search-tag">
          <span>热词：</span>
          <a href="#">韩剧</a>
          <a href="#">发烧</a>
          <a href="#">吊瓶</a>
          <a href="#">安全</a>
        </p>
      </div>
      <div class="cms-logo left">
        <img src="../images/headandfter/cms-logo.png" />
        <span class="vertical-gray1" style="height:60px; margin:0 30px; margin-bottom:6px;"></span>
      </div>
      <div class="header-nav left">
        <a href="#" class="nav-home">首页</a>
        <a href="#" class="nav-image">图片</a>
        <a href="#" class="nav-dkh">大咖号</a>
        <a href="#" class="nav-mtrz">媒体入驻</a>
        <a href="#" class="nav-lt">论坛</a>
        <a href="#" class="nav-app">APP</a>
      </div>
    </div>
  </div>
</header>
<!--End header-->
<section>
  <div class="container">
    <div class="banner">
      <div class="b-top">
        <p class="img-tag">
          <span>图片：</span>
          <a href="#" class="now-list">精选</a>
          <a href="#">广州</a>
          <a href="#">营养</a>
          <a href="#">故事</a>
          <a href="#">亲子游</a>
          <a href="#">快速怀孕</a>
          <a href="#">笔记</a>
        </p>
      </div>
      <div class="b-content fixed">
        <div class="list-numbers right">
          <ul class="l-numinfo fixed">
            <li class="num-img left"><div><img src="../images/imglist/showimg1.jpg" /></div></li>
            <li class="num-list left">
              <a href="#" class="num-title">米兰国际家具展 设计界的“奥斯卡”</a>
              <p class="num-author">BY：童伴儿童</p>
            </li>
            <li class="num-bg left">1</li>
          </ul>
          <ul class="l-numinfo fixed">
            <li class="num-img left"><div><img src="../images/imglist/img2.jpg" /></div></li>
            <li class="num-list left">
              <a href="#" class="num-title">文化产业创业创意人才扶持计划实行方式</a>
              <p class="num-author">BY：辣妹子辣</p>
            </li>
            <li class="num-bg left">2</li>
          </ul>
          <ul class="l-numinfo fixed">
            <li class="num-img left"><div><img src="../images/imglist/img1.jpg" /></div></li>
            <li class="num-list left">
              <a href="#" class="num-title">米兰国际家具展 设计界的“奥斯卡”</a>
              <p class="num-author">BY：童伴儿童</p>
            </li>
            <li class="num-bg left">3</li>
          </ul>
          <ul class="l-numinfo last-numinfo fixed">
            <li class="num-img left"><div><img src="http://news.life16.com/d/file/tupian/mengwa/2015-04-22/c1c7c754b9b37b9494352763be73b710.jpg" /></div></li>
            <li class="num-list left">
              <a href="#" class="num-title">起源、传承、融和，那些暗藏于中</a>
              <p class="num-author">BY：童伴儿童</p>
            </li>
            <li class="num-bg left">4</li>
          </ul>
        </div>
        <div class="slider-container right" style="width:663px; height:380px;"></div>
      </div>
    </div>
    <!--End banner-->
    <div class="imglist">
      <p class="refresh-bg">
        <a href="#" class="refresh-btn"></a>
      </p>
      <div class="il-content">
        <ul class="il-info fixed">
          <li class="il-info1 left">
            <div class="il-img"><img src="http://news.life16.com/d/file/tupian/mengwa/2015-04-22/c1c7c754b9b37b9494352763be73b710.jpg" /></div>
            <div class="imgnums nums-yellow">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="http://news.life16.com/d/file/tupian/mengwa/2015-04-22/c14f9b3b95cbaa4ca27c95bdda416bee.jpg" /></div>
            <div class="imgnums nums-purple">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/listimg.jpg" /></div>
            <div class="imgnums nums-blue">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/ShowNavImg.jpg" /></div>
            <div class="imgnums nums-red">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/2444.jpg" /></div>
            <div class="imgnums nums-red">8</div>
            <p class="il-title">日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">244</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/2555.jpg" /></div>
            <div class="imgnums nums-red">8</div>
            <p class="il-title">日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">255</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/2666.jpg" /></div>
            <div class="imgnums nums-red">8</div>
            <p class="il-title">日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">2666</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/listimg2.jpg" /></div>
            <div class="imgnums nums-yellow">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/right-infoimg1.jpg" /></div>
            <div class="imgnums nums-red">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/showimg1.jpg" /></div>
            <div class="imgnums nums-red">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
          <li class="il-info1 left">
            <div class="il-img"><img src="../images/imglist/listimg.jpg" /></div>
            <div class="imgnums nums-blue">8</div>
            <p class="il-title">江南水乡日落美景</p>
            <p class="il-read">
              <span class="icon-eyes right">233</span>
              <span>童伴儿童摄影</span>
            </p>
          </li><!--End il-info -->
        </ul>
      </div>
      <p class="more-info">
      	<a href="#" class="more-btn"></a><br /><br />点击加载更多
      </p>
    </div>
    <!--End imglist-->
  </div>
</section>
<!--End section-->
<div class="fenye2">
  <p class="next right"><a href="#/">下一页</a></p>
  <p class="prev left"><a href="#/">上一页</a></p>
  <div class="cont">
    <a href="#/">第<span>2</span>页</a>
    <div class="cont-info">
      <a href="#/">第<span>8</span>页</a>
      <a href="#/">第<span>7</span>页</a>
      <a href="#/">第<span>6</span>页</a>
      <a href="#/">第<span>5</span>页</a>
      <a href="#/">第<span>4</span>页</a>
      <a href="#/">第<span>3</span>页</a>
      <a href="#/">第<span>2</span>页</a>
      <a href="#/" class="nowpage">第<span>1</span>页</a>
    </div>
  </div>
</div>
<footer>
  <div class="footer footer-show-bg">
    <div class="f-banner fixed">
      <div class="bbsh left">
        <p style="padding-bottom:30px;"><img src="../images/headandfter/bbshimg.png" /></p>
        <p><img src="../images/headandfter/fan16-ewm.jpg" /></p>
      </div>
      <div class="hot-pd left">
        <p class="hot-title">热门频道</p>
        <div class="hot-link fixed">
          <div>
            <p><a href="#">新闻</a></p>
            <p><a href="#">国内</a></p>
            <p><a href="#">评论</a></p>
            <p><a href="#">国际</a></p>
            <p><a href="#">探索</a></p>
            <p><a href="#">社会</a></p>
            <p><a href="#">军事</a></p>
          </div>
          <div>
            <p><a href="#">图片</a></p>
            <p><a href="#">体育</a></p>
            <p><a href="#">NBA</a></p>
            <p><a href="#">CBA</a></p>
            <p><a href="#">综合</a></p>
            <p><a href="#">中超</a></p>
            <p><a href="#">足球</a></p>
          </div>
          <div>
            <p><a href="#">英超</a></p>
            <p><a href="#">西甲</a></p>
            <p><a href="#">意甲</a></p>
            <p><a href="#">娱乐</a></p>
            <p><a href="#">明星</a></p>
            <p><a href="#">图片</a></p>
            <p><a href="#">电影</a></p>
          </div>
          <div>
            <p><a href="#">财经</a></p>
            <p><a href="#">音乐</a></p>
            <p><a href="#">资料库</a></p>
            <p><a href="#">股票</a></p>
            <p><a href="#">产经</a></p>
            <p><a href="#">新股</a></p>
            <p><a href="#">金融</a></p>
          </div>
          <div>
            <p><a href="#">基金</a></p>
            <p><a href="#">商业</a></p>
            <p><a href="#">评论</a></p>
            <p><a href="#">国际</a></p>
            <p><a href="#">探索</a></p>
            <p><a href="#">社会</a></p>
          </div>
        </div>
      </div>
      <div class="call-alls left">
        <p class="hot-title">联系我们</p>
        <p class="alls1">商务合作：huangjiasheng@fan16.cn</p>
        <p class="alls1">广告发布：deloo@fan16.cn</p>
        <p class="alls1">投诉建议：service@fa</p>
        <div class="linkbg">
          <a href="#" class="xinlang"></a>
          <a href="#" class="tengxun"></a>
          <a href="#" class="zhandian"></a>
          <a href="#" class="douban"></a>
        </div>
      </div>
    </div>
    <div class="f-bottom">
      <p>Copyright©　2013-2015 fan16.cn,AllRights Reserved 粤ICP备 12093882 号-1 版权所有：广州赢酷通讯技术有限公司</p>
    </div>
  </div>
</footer>
<!--End footer-->
</body>
<script language="javascript">
$(function(){
	$(".slider-container").SlideImg({
			ImgSrc: ["../images/imglist/slide-img.jpg", "../images/imglist/slide-img.jpg", "../images/imglist/slide-img.jpg"],
			alink: ["#", "#"],
			show: 1,
			ItemBg: "../images/imglist/itembg.png",
			ItemNowBg: "../images/imglist/itemNowbg.png"
		});
	$(window).load(function(){
		$(".il-img").ImgRatio();
		$(".num-img>div").ImgRatio();		/*Start img 宽度比例*/
	});
})	
</script>
</html>
